<template>
    <div class="courseDetails">
        <Collapse v-model="currentCollapse" @on-change="changeCollapse">
            <Panel name="data">
                <span slot="">
                    课程资料
                    <div style="float: right;">
                        <Button type="info" @click.stop="refresh" style="margin-right: 4px">
                            <Icon type="md-refresh"/>
                            刷新
                        </Button>
                        <Button type="warning" @click.stop="orderData" style="margin-right: 4px">排序</Button>
                        <Button type="success" @click.stop="saveData" style="margin-right: 4px">保存</Button>
                    </div>
                </span>
                <div slot="content">
                    <div v-for="(obj,i) in courseData" :key="i" style="margin-bottom: 6px">

                        <Row>
                            <Col span="1">
                            <Button size="small" type="error" @click="delData(obj,i)"> ×</Button>
                            </Col>

                            <Col span="5">
                            <Input prefix="ios-pin"
                                   type="text"
                                   v-model="obj.dataName"
                                   placeholder="资料名称"
                                   maxlength="40"
                                   show-word-limit
                                   style="margin-left: -15px"/>
                            </Col>

                            <Col span="13">
                            <Input prefix="ios-redo"
                                   type="text"
                                   v-model="obj.dataUrl"
                                   maxlength="200"
                                   show-word-limit
                                   placeholder="资料链接"/>
                            </Col>

                            <Col span="1">
                            <i-switch v-model="obj.status"
                                      size="large"
                                      :true-value="1"
                                      :false-value="0"
                                      false-color="#ff4949"
                                      style="margin-left: 14px"
                                      @on-change="changeStatus(obj)">
                                <span slot="open">ON</span>
                                <span slot="close" style="font-size: 14px">OFF</span>
                            </i-switch>
                            </Col>
                        </Row>

                    </div>
                    <Button size="small" type="info" @click="addData"> +</Button>
                </div>
            </Panel>
            <Panel name="evaluate">
                课程评价
                <div slot="content">

                </div>
            </Panel>
            <Panel name="discuss">
                课程交流
                <div slot="content">

                </div>
            </Panel>
        </Collapse>

        <!--排序面板-->
        <Modal v-model="orderFlag"
               draggable
               :loading="true"
               @on-ok="okCourseDataOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">资料排序</span>
            </p>

            <Table :columns="courseDataDesc"
                   :data="courseDataOrder"
                   draggable
                   @on-drag-drop="dragOrder">
                <!--课程标题-->
                <template slot-scope="{ row, index }" slot="title">
                    <span>{{row.dataName}}</span>
                </template>
            </Table>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
                courseId: this.$route.query.cid,
                currentCollapse: [],
                //资料
                courseData: [],
                courseDataOrder: [],
                courseDataDesc: [
                    {title: "序号", type: 'index', resizable: true, align: "center", width: 70},
                    {title: "课程标题", slot: 'title', resizable: true, align: "left"},
                ],
                courseDataInfo: {
                    courseDataId: "",
                    courseId: "",
                    dataName: "",
                    dataUrl: "",
                    dataType: "",
                    showOrder: "",
                    status: "",
                },
                orderFlag: false
            }
        },
        methods: {
            //查询资料
            selectCourseData: function () {
                this.axios.get(`/course/courseData/courseDataList/${this.courseId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.courseData = data.data
                        }
                    })
            },
            //改变状态
            changeCollapse: function (name) {
                /*console.log(name);
                console.log(name.length);
                for (let i of name) {
                    if (i == "data" && name.length == 1) {
                        this.selectCourseData()
                    }
                }*/
            },
            //删除某个治疗
            delData(obj, index) {
                this.courseData.delete(index)
            },
            //添加资料行
            addData() {
                let courseDataInfo = {
                    courseId: this.courseId,
                    dataName: "",
                    dataUrl: "",
                    status: 1,
                }
                this.courseData.push(courseDataInfo)
            },
            //刷新
            refresh: function () {
                this.selectCourseData()
            },
            //课时排序
            orderData: function () {
                this.orderFlag = true
                this.axios.get(`/course/courseData/courseDataList/${this.courseId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.courseDataOrder = data.data
                        }
                    })
            },
            //确定排序
            okCourseDataOrder: function () {
                let ids = []
                for (let i of this.courseDataOrder) {
                    ids.push(i.courseDataId)
                }
                this.axios.put(`/course/courseData/order`, ids)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '资料排序成功'
                            });
                            this.orderFlag = false
                            this.selectCourseData()
                        }
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                let from = this.courseDataOrder[fromIndex];
                if (fromIndex == toIndex) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                }
                if (fromIndex - toIndex == -1) {
                    this.courseDataOrder.delete(fromIndex)
                    this.courseDataOrder.insert(toIndex + 1, from)
                    return
                }
                if (fromIndex > toIndex) {
                    this.courseDataOrder.delete(fromIndex)
                    this.courseDataOrder.insert(toIndex + 1, from)
                }
                if (fromIndex < toIndex) {
                    this.courseDataOrder.delete(fromIndex)
                    this.courseDataOrder.insert(toIndex, from)
                }
            },
            //修改状态
            changeStatus: function (obj) {
                let data = {
                    status: obj.status
                }
                this.axios.put(`/course/courseData/courseData/${obj.courseDataId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.info({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: `《${obj.dataName}》状态修改成功`
                            });
                        }
                    })
            },
            //保存资料
            saveData: function () {
                let data = []
                for (let i of this.courseData) {
                    if ((i.dataName == null || i.dataName.trim() == "") && (i.dataUrl == null || i.dataUrl.trim() == "")) {
                        this.$Message.error({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '请删除资料名和资料URL同时为空的数据'
                        });
                    } else {
                        let courseData = {
                            dataName: i.dataName,
                            dataUrl: i.dataUrl,
                            status: i.status,
                        }
                        data.push(courseData);
                    }
                }
                this.axios.put(`/course/courseData/courseDataList/${this.courseId}`, data)
                    .then((data) => {
                        if (data.code = 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程资料保存成功'
                            });
                        }
                    })
            }
        },
        mounted() {
            this.selectCourseData()
        }
    }
</script>

<style scoped>

</style>